<template>
  <div class="content">
    <div class="search-box">
      <span>共找到<span class="num">28498</span>个专业</span>
    </div>

    <div class="university-list">
      <div>
        <div class="university-list-box" v-for="item in majorList" :key="item.id">
          <div class="flex">
            <div class="box-title">
              <div class="vertical-line" />
              <span class="black">{{ item.name }}（{{ item.num }}）</span>
            </div>
            <div>
              专业类：{{ item.majorClass }} 专业：{{ item.majorNum }}
            </div>
          </div>
          <div class="box-content-one" v-for="item2 in item.children" :key="item2.id">
            <div class="box-content-one-title">{{ item2.name }}（{{ item2.num }}）</div>
            <div class="box-content-two flex">
              <div class="box-content-two-title" v-for="item3 in item2.children" :key="item3.id">{{ item3.name }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="page">
        <Pagination v-model:current="current" show-quick-jumper :showSizeChanger="false" :locale="customLocale"
          :total="500" @change="onChange">
          <template #itemRender="{ type, originalElement }">
            <a v-if="type === 'prev'">上一页</a>
            <a v-else-if="type === 'next'">下一页</a>
            <component :is="originalElement" v-else></component>
          </template>
        </Pagination>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { Pagination } from 'ant-design-vue'
import { majorList } from './data';

const current = ref<number>(1);
const onChange = (pageNumber: number) => {
  console.log('Page: ', pageNumber);
};
const customLocale = {
  items_per_page: '/页',
  jump_to: '到第',
  page: '页',
  prev_page: '上一页',
  next_page: '下一页',
}
</script>

<style lang="less" scoped>
@import "./index.less";

:deep(:where(.css-dev-only-do-not-override-1qb1s0s).ant-pagination .ant-pagination-item-active a) {
  color: red;
}

:deep(:where(.css-dev-only-do-not-override-1qb1s0s).ant-pagination .ant-pagination-item-active) {
  border-color: red;
}
</style>
